When you need text and a figure next to each other, use a media object.
Media Objects: Default
About Media Objects
Placing text next to an image, icon, figure, or video is common for many applications. The figure can be either on the right, left, or both. The text can start at the top of the image or be centered next to it. The width of the media object is controlled either by the parent container or a secondary module class.
.slds-media object can be used as a container on any element. Inside are the two required elements. The figure (typically an image or an icon) should be placed inside an element with the
.slds-media__figure class. Next to it is typically some text that should be placed in an element with the
By default, the text starts at the top of the figure. Center the body and the figure by applying the
.slds-media_center class to
To position the figure on the other side of the body, apply the
.slds-media__figure_reverse to the figure.
You may also position figures on both sides of the body at the same time using